<script setup>
import SideBar from '@/components/main/sidebar/sideBar.vue'
import Topbar from '@/components/main/topbar/topbar.vue'
import Content from '@/components/main/content/content.vue'
import { ref } from 'vue'

//折叠面板
const isFold = ref(true)
const foldSide = (value) => {
  console.log(value)
  isFold.value = value
}
</script>

<template>
  <div class="main">
    <el-container>
      <el-aside :width="isFold ? '200px' : '50px'">
        <side-bar :is-fold="isFold" />
      </el-aside>
      <el-container>
        <el-header>
          <topbar @fold-side="foldSide" />
        </el-header>
        <el-main>
          <content />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="less">
.main {
  height: 100%;

  .el-container {
    height: 100%;

    .el-aside {
      transition: all ease-in 0.3s;
    }
  }
}
</style>
